<template>
	<div class="role-container" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
		<div class="top">
			<el-select v-model="searchInfo.storeId" size="small" style="width: 120px">
				<el-option v-for="item in productlist" :key="item.storeId" :label="item.storeName" :value="item.storeId"> </el-option>
			</el-select>
			<el-input v-model="searchInfo.productName" placeholder="商品名称" size="small" clearable style="width: 120px"></el-input>
			<el-input v-model="searchInfo.brandName" placeholder="品牌" size="small" clearable style="width: 120px"></el-input>
			<el-input v-model="searchInfo.typeName" placeholder="类型" size="small" clearable style="width: 120px"></el-input>
			<el-input v-model="searchInfo.supplyName" placeholder="供应商" size="small" clearable style="width: 120px"></el-input>
			<el-input v-model="searchInfo.placeName" placeholder="产地" size="small" clearable style="width: 120px"></el-input>
			<el-select v-model="searchInfo.upDownState" placeholder="上/下架" size="small" style="width: 120px">
				<el-option label="未上架" :value="0">未上架</el-option>
				<el-option label="已上架" :value="1">已上架</el-option>
			</el-select>
			<el-select v-model="searchInfo.isOverDate" placeholder="已/未过期" size="small" style="width: 120px">
				<el-option label="未过期" :value="0">未过期</el-option>
				<el-option label="已过期" :value="1">已过期</el-option>
			</el-select>
			<el-button type="primary" icon="el-icon-search">查询</el-button>
		</div>
		<div class="btn-div">
			<el-button type="primary" icon="el-icon-plus" @click="isAddShow = true">添加商品</el-button>
			<el-button type="warning" icon="el-icon-upload2" @click="exportClick">导出数据</el-button>
			<el-button type="primary">调货</el-button>
			<el-button type="danger" icon="el-icon-delete">删除</el-button>
		</div>
		<div class="talb_div">
			<el-table :data="dataList" border @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="50"> </el-table-column>
				<el-table-column label="商品图片" width="100">
					<!-- <template #default="scope">
						<el-image style="width: 60px; height: 60px" :src="#" fit="fill" />
					</template> -->
				</el-table-column>
				<el-table-column prop="productName" label="商品名称" width="180"> </el-table-column>
				<el-table-column prop="brandName" label="品牌" width="100"> </el-table-column>
				<el-table-column prop="typeName" label="类型" width="100"> </el-table-column>
				<el-table-column prop="supplyName" label="供应商" width="180"> </el-table-column>
				<el-table-column prop="placeName" label="产地" width="100"> </el-table-column>
				<el-table-column prop="storeName" label="仓库" width="100"> </el-table-column>
				<el-table-column prop="productInvent" label="库存" width="100"> </el-table-column>
				<el-table-column label="出库状态" width="100">
					<template #default="scope"
						><span :class="{ red: scope.row.upDownState == 0, green: scope.row.upDownState == 1 }">{{ scope.row.upDownState == 1 ? '已上架' : '未上架' }}</span></template
					>
				</el-table-column>
				<el-table-column prop="salePrice" label="售价" width="100"> </el-table-column>
				<el-table-column prop="unitName" label="单位" width="100"> </el-table-column>
				<el-table-column prop="productDate" label="生产日期" width="100"> </el-table-column>
				<el-table-column prop="suppDate" label="保质期" width="100"> </el-table-column>
				<el-table-column label="操作" width="250"
					><template #default="scope">
						<el-button type="text" size="small" v-if="scope.row.upDownState == 0" @click="openCommodityUpdate(scope.row)">修改</el-button>
						<el-button type="text" size="small" v-if="scope.row.upDownState == 0" @click="deleteCommodity(scope.row.productId)">删除</el-button>
						<el-button type="text" size="small" v-if="scope.row.upDownState == 0" @click="changState(scope.row.productId, 1)">上架</el-button>
						<el-button type="text" size="small" v-if="scope.row.upDownState == 1" @click="changState(scope.row.productId, 0)">下架</el-button>
						<el-button type="text" size="small" @click="openPurchaseAdd(scope.row)">采购</el-button>
						<el-button type="text" size="small" v-if="scope.row.upDownState == 1" @click="openOutstoreAdd(scope.row)">出库</el-button>
						<el-button type="text" size="small">盘点</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="page_nation">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="pageInfo.pageNum"
				:page-sizes="[10, 20, 30, pageInfo.totalNum]"
				:page-size="pageInfo.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pageInfo.totalNum"
			>
			</el-pagination>
		</div>

		<!-- 弹窗 -->
		<!-- <el-dialog title="添加用户" :visible.sync="isAddShow" width="25%" :close-on-click-modal="false">
			<div>
				<el-form :model="formInfo" :rules="rules" ref="form" label-width="100px">
					<el-form-item label="名称" prop="roleName" size="small">
						<el-input v-model="formInfo.roleName"></el-input>
					</el-form-item>
					<el-form-item label="描述" prop="roleDesc" size="small">
						<el-input v-model="formInfo.roleDesc"></el-input>
					</el-form-item>
					<el-form-item label="代码" prop="roleId" size="small">
						<el-input v-model="formInfo.roleId"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="isAddShow = false">取 消</el-button>
					<el-button type="primary" @click="openCommodityAdd('form')">确 定</el-button>
				</div>
			</div>
		</el-dialog>
		<el-dialog title="修改用户信息" :visible.sync="isEditShow" width="25%" :close-on-click-modal="false">
			<div>
				<el-form label-width="100px">
					<el-form-item label="名称" size="small">
						<el-input v-model="formEditInfo.roleName"></el-input>
					</el-form-item>
					<el-form-item label="描述" size="small">
						<el-input v-model="formEditInfo.roleDesc"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="isEditShow = false">取 消</el-button>
					<el-button type="primary" @click="handleEditEnter">确 定</el-button>
				</div>
			</div>
		</el-dialog> -->
		<el-dialog title="添加出库单" :visible.sync="isOutstoreShow" width="25%" :close-on-click-modal="false">
			<div>
				<el-form label-width="100px">
					<el-form-item label="商品名称" size="small">
						<el-input v-model="formOutstoreInfo.productName"></el-input>
					</el-form-item>
					<el-form-item label="仓库名称" size="small">
						<el-input v-model="formOutstoreInfo.storeName"></el-input>
					</el-form-item>
					<el-form-item label="库存" size="small">
						<el-input v-model="formOutstoreInfo.productInvent"></el-input>
					</el-form-item>
					<el-form-item label="出库数量" size="small">
						<el-input v-model="formOutstoreInfo.outNum"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="isOutstoreShow = false">取 消</el-button>
					<el-button type="primary" @click="handleOutstoreEnter">确 定</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { exportExcel } from 'excel-tools/dist/main.es.js';
export default {
	data() {
		return {
			loading: false,
			exportData: [],
			searchInfo: {
				storeId: 1,
				productName: '',
				brandName: '',
				typeName: '',
				supplyName: '',
				placeName: '',
				upDownState: '',
				isOverDate: '',
			},
			pageInfo: {
				pageSize: 10,
				pageNum: 1,
				totalNum: 0,
			},
			productlist: [],
			dataList: [],
			formInfo: {
				roleDesc: '',
				roleCode: '',
				roleName: '',
			},
			formOutstoreInfo: {
				productName: '',
				storeName: '',
				productInvent: '',
				outNum: '',
			},
			form: {
				roleDesc: '',
				roleCode: '',
				roleName: '',
			},
			rules: {
				roleName: [{ required: true, message: '请输入角色名', trigger: 'blur' }],
				roleId: [{ required: true, message: '请输入角色代码', trigger: 'blur' }],
			},
			isAddShow: false,
			isEditShow: false,
			isOutstoreShow: false,
		};
	},
	methods: {
		getList() {
			this.loading = true;
			this.$http
				.get('/product/product-page-list', {
					params: {
						...this.searchInfo,
						...this.pageInfo,
					},
				})
				.then((res) => {
					const {
						code,
						data: { pageSize: one, pageNum, resultList, totalNum },
					} = res;
					if (code == 200) {
						this.dataList = resultList;
						this.pageInfo.totalNum = totalNum;
						this.pageInfo.pageSize = one;
						this.pageInfo.pageNum = pageNum;
						console.log('data', res.data);
					}
				})
				.finally(() => {
					this.loading = false;
				});
		},
		//获取选取框
		handleSelectionChange(selection, row) {
			this.exportData = [...selection];
			this.exportData.forEach((item) => {
				this.$set(item, 'upDownState', item.upDownState == 0 ? '已下架' : '已上架');
			});
			console.log(selection);
		},
		//上下架
		changState(productId, state) {
			this.$http.put('/product/state-change', { productId, state }).then((res) => {
				if (res.code == 200) {
					this.getList();
					this.$message.success('修改成功');
				}
			});
		},
		//出库
		openOutstoreAdd(row) {
			this.formOutstoreInfo.productName = row.productName;
			this.formOutstoreInfo.storeName = row.storeName;
			this.formOutstoreInfo.productInvent = row.productInvent;
			this.formOutstoreInfo.outNum = row.outNum;
			this.isOutstoreShow = true;
		},
		handleOutstoreEnter() {
			this.$http.put('/outstore/outstore-add', this.formOutstoreInfo).then((res) => {
				const { code, data } = res;
				if (code == 200) {
					this.isOutstoreShow = false;
					this.getList();
					this.$message.success('添加成功');
				}
			});
		},
		//修改用户
		// openCommodityUpdate(row) {
		// 	this.formEditInfo.roleId = row.roleId;
		// 	this.formEditInfo.roleName = row.roleName;
		// 	this.formEditInfo.roleDesc = row.roleDesc;
		// 	this.isEditShow = true;
		// },
		// handleEditEnter() {
		// 	this.$http.put('/role/role-update', this.formEditInfo).then((res) => {
		// 		const { code, data } = res;
		// 		if (code == 200) {
		// 			this.isEditShow = false;
		// 			this.getList();
		// 			this.$message.success('添加成功');
		// 		}
		// 	});
		// },
		//删除商品
		deleteCommodity(row) {
			// const userId = row.userId;
			this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					this.$http.delete(`/product/product-delete/${row.productId}`).then((res) => {
						this.$message({
							type: 'success',
							message: '删除成功!',
						});
						this.getList();
					});
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					});
				});
		},
		//页码
		handleSizeChange(size) {
			this.pageInfo.pageSize = size;
			this.getList();
		},
		handleCurrentChange(current) {
			this.pageInfo.pageNum = current;
			this.getList();
		},
		//添加商品
		openCommodityAdd(form) {
			this.$refs[form].validate((valid) => {
				if (valid) {
					this.$http.post('/role/role-add', this.formInfo).then((res) => {
						const { code, data } = res;
						if (code == 200) {
							this.isAddShow = false;
							this.getList();
							this.$message.success('添加成功');
						}
					});
				} else {
					console.log('验证失败');
					return false;
				}
			});
		},
		//导出表格
		exportClick() {
			exportExcel({
				fileName: '用户列表',
				header: [
					{
						key: 'roleId',
						header: '角色ID',
						width: 25,
					},
					{
						key: 'roleName',
						header: '角色名',
						width: 24,
					},
					{
						key: 'roleDesc',
						header: '角色描述',
						width: 23,
					},
					{
						key: 'roleCode',
						header: '角色代码',
						width: 25,
					},
					{
						key: 'roleState',
						header: '状态',
						width: 25,
					},
					{
						key: 'getCode',
						header: '创建人',
						width: 24,
					},
					{
						key: 'createTime',
						header: '创建时间',
						width: 23,
					},
				],
				content: this.exportData, // 导出的数据
			});
		},
	},
	created() {
		//拿到仓库下拉菜单
		this.$http.get('/product/store-list').then((res) => {
			const { code, data } = res;
			code == 200 && (this.productlist = data);
		});
		this.getList();
	},
};
</script>

<style lang="scss" scoped></style>
